<template>
  <el-tabs
    v-model="editableTabsValue"
    type="card"
    editable
    class="demo-tabs"
    @edit="handleTabsEdit"
    :closable="true"
  >
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
      :closable="item.closable"
    >
      <component :is="item.component" />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, watch, markRaw } from "vue";
import { useRouter } from "vue-router";
import { eventBus } from "@/utils/eventBus.js";
import HomeView from "@/components/HomeView.vue";
import NotFound from "@/components/NotFound.vue";
import Dashboard from "@/views/product/Dashboard.vue";
import ExamOnline from "@/views/examOnline/ExamOnline.vue";
import MyQuestionBank from "@/views/examOnline/MyQuestionBank.vue";
import MyGrade from "@/views/examOnline/MyGrade.vue";
import ExamManage from "@/views/examControl/ExamManage.vue";
import MarkManage from "@/views/examControl/MarkManage.vue";
import QuestionBankMange from "@/views/examControl/QuestionBankMange.vue";
import QuestionManage from "@/views/examControl/QuestionManage.vue";
// import MarkExam from "@/views/examControl/MarkExam.vue";
import StaticOverview from "@/views/total/StaticOverview.vue";
import NoticeManage from "@/views/system/NoticeManage.vue";
import RoleManage from "@/views/system/RoleManage.vue";
import UserManage from "@/views/system/UserManage.vue";

const editableTabsValue = ref("Dashboard");
const router = useRouter();
const editableTabs = ref([
  {
    title: "产品介绍",
    name: "Dashboard",
    component: ''
    // markRaw(Dashboard),
  },
]);

const componentsMap = {
  // examOnline: markRaw(ExamOnline),
  // myQuestionBank: markRaw(MyQuestionBank),
  // myGrade: markRaw(MyGrade),
  // examControl: markRaw(ExamManage),
  // bankControl: markRaw(QuestionBankMange),
  // questionControl: markRaw(QuestionManage),
  // markingControl: markRaw(MarkManage),
  // statistical: markRaw(StaticOverview),
  // notice: markRaw(NoticeManage),
  // person: markRaw(RoleManage),
  // user: markRaw(UserManage),
};

// Listen to events from the event bus
eventBus.value.on("add-tab", (tab) => {
  const existingTab = editableTabs.value.find((t) => t.name === tab.name);
  if (!existingTab) {
    editableTabs.value.push({
      title: tab.title,
      name: tab.name,
      component: componentsMap[tab.component],
      closable: true,
    });
    editableTabsValue.value = tab.name;
  } else {
    editableTabsValue.value = existingTab.name;
  }
});

eventBus.value.on("switch-tab", (title) => {
  const existingTab = editableTabs.value.find((t) => t.title === title);
  if (existingTab) {
    editableTabsValue.value = existingTab.name;
  }
});

watch(editableTabsValue, (newVal) => {
  if (newVal) {
    router.push(`/home/${newVal}`);
  }
});

const handleTabsEdit = (
  targetName: string | undefined,
  action: "remove" | "add"
) => {
  if (action === "remove") {
    if (!editableTabs.value) {
      console.error("editableTabs.value is undefined");
      return;
    }

    const tabs = editableTabs.value;
    let activeName = editableTabsValue.value;

    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
    }
    editableTabsValue.value = activeName;
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
  }
};

const handleTabClick = (tab: any) => {
  const tabName = tab.name;
  router.push(`/home/${tabName}`);
};
</script>

<style>
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs > .el-tabs__header .el-tabs__new-tab {
  display: none;
}
</style>
